<style scoped>
.fixed-wd {
  width: 180px;
  display: flex;
  justify-content: space-between;
}
</style>
<!--  -->
<template>
  <li>
    <div class="title white"><a class="nohover">容器操作</a></div>
    <div class="li-child white">
      <ul class="child-ul">
        <li>
          <span class="white title"><a :class="{'disable-no':!isOptFixed, 'fixed-wd': true}"
              :title="isOptFixed?'':'需要开启任意容器可编辑！'" @click.stop="allFixed"><span>全容器 固定</span>
              <span>(Alt+1)</span></a></span>
        </li>
        <li>
          <span class="white title fixed-wd"><a :class="{'disable-no':!isOptFixed, 'fixed-wd': true}"
              :title="isOptFixed?'':'需要开启任意容器可编辑！'" @click.stop="allNotFixed"><span>全容器 不固定</span>
              <span>(Alt+1)</span></a></span>
        </li>
        <li>
          <span class="white title"><a @click.stop="allHover">全容器编辑 开启</a></span>
        </li>
        <li>
          <span class="white title"><a @click.stop="allNothover">全容器编辑 关闭</a></span>
        </li>
      </ul>
    </div>
  </li>
</template>

<script>
// import * as WindowType from '@/config/windowtype.js'
import * as PubsubType from '@/config/pubsubtype.js'
import storage from '@/core/storage.js'
import { mapState } from 'vuex'
import PubSub from 'pubsub-js'
export default {
  props: {
    isOptFixed: {
      type: Boolean
    },
    allContainerHover: {
      type: Function
    }
  },
  created () {

    // let self = this
    // let code = 0
    // let code2 = 0
    // document.onkeydown = function (e) {
    //   let evn = e || event
    //   let key = evn.keyCode || evn.which || evn.charCode
    //   console.log(key)
    //   // F2
    //   if (key === 113) {
    //     console.log('f2')
    //   }
    //   // F5
    //   if (key === 116) {
    //     // 禁止默认事件
    //     e.preventDefault()
    //     console.log('f5')
    //   }
    //   //  c
    //   if (key === 67) {
    //     code2 = 1
    //   }
    //   //  j
    //   if (key === 74) {
    //     code2 = 2
    //   }
    //   //  alt
    //   if (key === 18) {
    //     code = 1
    //   }
    //   // Alt + C
    //   if (code === 1 && code2 === 1) {
    //     console.log('alt + c')
    //   }
    //   // Alt+ j
    //   if (code === 1 && code2 === 2) {
    //     console.log('alt + j')
    //   }
    // }
    // keyup时及时的 归零
    // document.onkeyup = function (e) {
    //   if (e.keyCode === 67) {
    //     code2 = 0
    //   }
    //   if (e.keyCode === 18) {
    //     code = 0
    //   }
    //   if (e.keyCode === 74) {
    //     code2 = 0
    //   }
    //   if (e.keyCode === 88) {
    //     code2 = 0
    //   }
    // }
  },
  mounted () {
    // 订阅切换设备事件
    PubSub.subscribe(PubsubType.PUBSUB_CHANGE_DEVICE, (event, data) => {
      if (data.device === 1) {
        let isOptFixed = parseInt(storage.getItem('set-temp-is-opt-fixed-value'))
        if (isOptFixed) {
          this.allHover()
        }
      } else if (data.device === 2) {
        storage.setItem('set-temp-is-opt-fixed-value', '' + (this.isOptFixed ? 1 : 0))
        this.allNothover()
      }
    })
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  data () {
    return {
      toggle: true
    }
  },
  methods: {
    // 操作，让所有的容器全部 fixed 显示固定
    allFixed () {
      this.design.ref.contentWindow.vueFunc.allFixed()
    },
    // 操作，让所有的容器全部 not fixed 不固定
    allNotFixed () {
      this.design.ref.contentWindow.vueFunc.allNotFixed()
    },
    // 操作，让所有的容器全部显示操作
    allHover () {
      this.allContainerHover(true)
    },
    // 操作，让所有的容器全部不显示操作
    allNothover () {
      this.allContainerHover(false)
    }
  }
}

</script>
